<template>
	<view class="signIn">
		<app-title title='积分签到'></app-title>
		<view class="signIn_box">
			<view class="signIn_top">
				<view class="signIn_top_left">
					签到日历
				</view>
				<view class="signIn_top_right">
					已连续签到<span class="signIn_top_right_text">{{res.lianxu}}</span>天
				</view>
			</view>
			<view class="calendar-content" v-if="showCalendar">
				<view>
					<uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth='false' />
				</view>
				<view class="SignInImmediately" v-if="res">
					<view :class="res.signed === 0?'SignInImmediately_box':'yiqiandoa'" @click="sign_dosignFun">
						{{res.signed === 0?'立即签到':'已签到'}}
					</view>
				</view>
			</view>

			<view class="signIn_bottom">
				<view class="signIn_bottom_title">
					签到说明
				</view>
				<view class="signIn_bottom_item" v-for="(item,index) in res.notice" :key="index">
					{{item}}
				</view>
			</view>


			<view class="signSuccess" @click.stop="isShow = !isShow" v-if="isShow">
				<view class="signSuccess_box" @click="hhh">
					<view class="signSuccess_box_top">
						<view class="signSuccess_box_top_icons">
							<uni-icons type="checkmarkempty" size="16" color="#EE7309"></uni-icons>
						</view>
						<view class="signSuccess_box_top_text">
							<p>{{message.addcredit}}积分</p>
							<span>已连续打卡{{message.signorder}}天</span>
						</view>
					</view>
					<view class="signSuccess_box_bottom">
						<view class="signSuccess_box_bottom_text">
							签到成功
						</view>
						<view class="signSuccess_box_bottom_an">
							确认
						</view>
					</view>
				</view>
			</view>



		</view>






	</view>
</template>

<script>
	import {
		sign_dosign,
		sign
	} from '@/api/home.js'
	export default {
		components: {},
		data() {
			return {
				openid: '',
				showCalendar: false,
				selected: [],
				res: '',
				message: '',
				isShow: false,
				equipment: ''
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			});


		},
		onLoad() {
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.signFun();
				}
			});
		},
		methods: {
			hhh() {},
			async signFun() {
				let data = await sign(this.openid);
				this.res = data;
				data.sign_data.forEach(item => {
					item.info = '签到';
					this.selected.push(item)
				})
			},
			async sign_dosignFun() {
				if (this.res.signed === 1) return
				let data = await sign_dosign(this.openid);
				this.signFun();
				if (data.status === 1) {
					this.message = data.result;
					// setTimeout(() => {
					this.isShow = true;
					// }, 2000);
				}
				console.log(data);
			},
			change(e) {
				console.log(e);
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				this.selected.push({
					date: e.fulldate,
					info: '签到'
				})
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}

	}
</script>

<style lang="scss">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	page {
		background-color: #F6F6F6;
	}

	.calendar-content {
		background-color: #fff;
		padding-bottom: 50rpx;
	}

	.signIn {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.signIn_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;
		}

		.signIn_top {
			width: 100%;
			display: flex;
			height: 104rpx;
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			color: #333;
			background-color: #fff;
			border-bottom: 1rpx solid #f6f6f6;

			.signIn_top_right {
				color: #999;
				font-size: 26rpx;

				.signIn_top_right_text {
					padding: 0 20rpx;
					color: #ff6000;
					font-size: 30rpx;
					font-weight: 600;
				}
			}
		}

		.SignInImmediately {
			width: 100%;
			padding: 0 20rpx;
			height: 80rpx;
			margin-top: 50rpx;

			.SignInImmediately_box {
				width: 100%;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
				color: #fff;
				border-radius: 100rpx;
			}

			.yiqiandoa {
				width: 100%;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				background: #F7F7F7;
				color: rgba(204, 204, 204, .8);
				border-radius: 100rpx;
				// box-shadow: 0 0 10rpx #ccc;
			}

		}

		.signIn_bottom {
			width: 100%;
			margin-top: 20rpx;
			padding: 30rpx 40rpx 60rpx;
			background-color: #fff;

			.signIn_bottom_title {
				font-size: 1rem;
				font-weight: 500;
				color: #333;
				line-height: normal;
				margin-bottom: 20rpx;
			}

			.signIn_bottom_item {
				font-size: .8125rem;
				font-weight: 500;
				color: #666;
				line-height: 1.25rem;
			}
		}

		.signSuccess {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			z-index: 1000;
			position: fixed;
			top: 0;

			.signSuccess_box {
				width: 400rpx;
				height: 500rpx;
				background-color: #EE7309;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				z-index: 1100;

				.signSuccess_box_top {
					width: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					padding: 50rpx 0;
					flex: 1;

					.signSuccess_box_top_icons {
						background-color: #fff;
						border-radius: 100rpx;
						padding: 10rpx 10rpx;
						width: 50rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
					}

					.signSuccess_box_top_text {
						line-height: 50rpx;
						text-align: center;

						p {
							color: #F9EB1C;
						}

						span {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

				.signSuccess_box_bottom {
					width: 100%;
					height: 260rpx;
					background-image: url('@/static/home/sign.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					padding: 40rpx 0;
					justify-content: space-around;

					.signSuccess_box_bottom_text {
						font-size: 34rpx;
						font-weight: 600;
						color: #EE6D08;
					}

					.signSuccess_box_bottom_an {
						width: 45%;
						height: 60rpx;
						// background-color: #EE6D08;
						background: linear-gradient(90deg, #EE6B00, #EF8626);
						border-radius: 100rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 30rpx;
						color: #fff;
					}
				}

			}
		}
	}
</style>